<template>
	<view class="codefun-flex-col page space-y-32">
	<view class="codefun-flex-row codefun-items-center group space-x-16">
		<uni-search-bar  @input="input":radius="100" cancel-button="none"></uni-search-bar>	
			<view class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 button" @click="toSearch">
			  <text class="text">搜索</text>
			</view>
	</view>
	<view class="history-box">
	<view class="history-title">
		<text class="text_2">搜索历史</text>
		<image
		  class="image_2"
		  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/64979aaa5a7e3f03109285bc/649cf90f726ab50011f4229a/16883518476037768935.png"
		 @click="clean"></image>
	</view>
	<view class="history-list">
		<uni-tag :text="item" v-for="(item,i) in histories" :key="i"></uni-tag>
	</view>
	</view>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				timer: null,
				kw: '',
				historyList:[]
			};
		},
		onLoad() {
			this.historyList=JSON.parse(uni.getStorageSync('kw')||'[]')
		},
		methods: {
			input(e){
				clearTimeout(this.timer)
				
				this.timer=setTimeout(()=>{
					this.kw=e
					console.log(e+"调试")
				},500)
				this.kw=e
			},
			
			toSearch() {
				uni.navigateTo({
						url: "../searchpage/searchlist?keyword="+this.kw
					})	
		       
				const set = new Set(this.historyList)
				set.delete(this.kw)
				set.add(this.kw)
				this.historyList=Array.from(set)
				uni.setStorageSync('kw',JSON.stringify(this.historyList))
			},
			clean(){
				this.historyList=[]
				uni.setStorageSync('kw','[]')
			}
		},
		computed: {
			histories(){
				return [...this.historyList].reverse()
			}
		}
	}

</script>

<style>
	.page {
	  padding: 43.6rpx 8.72rpx 1405.81rpx 13.95rpx;
	  background-image: linear-gradient(0deg, #b6b6fa 0%, #c9f0ed 100%);
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	.button {
	  margin: 5.23rpx 6.98rpx 5.23rpx 0;
	  padding: 13.95rpx 0;
	  background-color: #e1e1fc;
	  border-radius: 17.44rpx;
	  width: 120.35rpx;
	  height: 62.79rpx;
	  border: solid 6.98rpx #9fa1f5;
	  .text {
	    color: #363799;
	    font-size: 26.67rpx;
	    font-family: AlimamaShuHeiTi;
	    line-height: 20.93rpx;
	  }
	}
	
.group {
	  
    padding-left: 48.84rpx;
    padding-right: 34.88rpx;
  }
  .space-x-16 > view:not(:first-child),
  .space-x-16 > text:not(:first-child),
  .space-x-16 > image:not(:first-child) {
    margin-left: 27.91rpx;
  }

	.history-box{
		padding: 0 5rpx;
		.history-title{
			display: flex;
			justify-content: space-between;
			height: 40px;
			align-items:center;
			font-size: 13px;
			border-bottom: 1px solid #efefef;
			.text_2 {
			  color: #363799;
			  font-size: 30.16rpx;
			  font-family: AlimamaShuHeiTi;
			  line-height: 24.42rpx;
			}
			.image_2 {
			  margin-right: 10.47rpx;
			  width: 43.6rpx;
			  height: 38.37rpx;
			}
		}
		.history-list{
			display: flex;
			flex-wrap: wrap;
			.uni-tag{
				margin-top: 5px;
				margin-right: 5px;
			}
		}

	}
	}
</style>